<template>
  <div class="upload-excel">
    <!-- 文件上传的对话框 -->
    <el-dialog v-model="uploadDialog" draggable title="上传Excel文件" width="45%" :before-close="handleClose">
      <div v-show="!fileName">
        <el-upload
          class="upload-demo"
          drag
          action="#"
          :auto-upload="false"
          :show-file-list="false"
          :http-request="handleUpload"
          :on-change="handleOnChange"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">将文件拖到此处或<em>单击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">提示：仅支持xls、xlsx文件</div>
            <div class="watch">
              <el-icon class="icon"><WarningFilled /></el-icon>
              <el-link class="text" :underline="false" @click="isShowfileDetail = !isShowfileDetail">
                点击查看上传文件内容规范
              </el-link>
            </div>
            <!-- 文件内容规范 -->
            <div class="fileDetail" v-if="isShowfileDetail">
              <div class="content" v-show="pageInfo.role===0">
                <h4>管理员信息文件</h4>
                <p>1、Excel文件表头必须包含：账号、姓名、性别、手机号码、邮箱；</p>
                <p>2、账号、姓名、性别不能为空。手机号码和邮箱可为空；</p>
                <p>3、账号不可重复存在，且必须以 "@admin.com" 为结尾；</p>
                <p>4、如果手机号码和邮箱不为空，则必须正确且符合规范；</p>
              </div>
              <div class="content" v-show="pageInfo.role===1">
                <h4>教师信息文件</h4>
                <p>1、Excel文件表头必须包含：账号、姓名、所属院系、性别、手机号码、邮箱；</p>
                <p>2、账号、姓名、所属院系、性别不能为空。手机号码和邮箱可为空；</p>
                <p>3、账号不可重复存在，且必须以 "@gk.com" 为结尾；</p>
                <p>4、所属院系必须真实存在；</p>
                <p>5、如果手机号码和邮箱不为空，则必须正确且符合规范；</p>
              </div>
              <div class="content" v-show="pageInfo.role===2">
                <h4>学生信息文件</h4>
                <p>1、Excel文件表头必须包含：学号、姓名、所属院系、所属专业、所属班级、层次、性别、入学年份、手机号码、邮箱；</p>
                <p>2、学号、姓名、所属院系、所属专业、所属班级、层次、性别、入学年份不能为空。手机号码和邮箱可为空；</p>
                <p>3、学号不可重复存在，且必须以 "gk" 为开头；</p>
                <p>4、所属院系、所属专业、所属班级必须真实存在；</p>
                <p>5、层次为“本科/专科”二选一；</p>
                <p>6、入学年份格式为：yyyy.mm.dd，例如：2023.09.01</p>
                <p>7、如果手机号码和邮箱不为空，则必须正确且符合规范；</p>
              </div>
            </div>
          </template>
        </el-upload>
      </div>
      <!-- 添加文件成功的图片 -->
      <div class="preview" v-if="fileName">
        <div class="imgbox">
          <img src="../../assets/svg/excel-ext.svg" alt="" />
        </div>
        <span>{{ fileName }}</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button v-if="fileName" @click="fileName=''" plain>上一步</el-button>
          <el-button @click="handleClose">取消</el-button>
          <el-button v-if="fileName" @click="handleUpload" type="danger">确认上传</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'
import { UploadFilled, WarningFilled } from '@element-plus/icons-vue'
import { binMsg } from '@/global/api.js'

const props = defineProps({
  pageInfo: {
    type: Object,
    default: ''
  }
})

const store = useStore()
const uploadDialog = ref(false)
const isShowfileDetail = ref(false)
const formData = ref(new FormData())
const fileName = ref('')

// 添加文件
const handleOnChange = (file) => {
  formData.value.delete('file')
  const name = file.name.split('.')
  const isType = name[1] === 'xlsx' || name[1] === 'xls'
  if (!isType) return binMsg('error', '请上传excel格式的文件!')
  fileName.value = file.name
  formData.value.append('file', file.raw) //添加文件对象
}

// 上传文件
const handleUpload = async () => {
  const data = {
    role: props.pageInfo.role,
    formData: formData.value
  }
  store.dispatch('userManageModule/createUsersAction', data)
  handleClose()
}

// 对话框关闭
const handleClose = () => {
  fileName.value = ''
  uploadDialog.value = false
  isShowfileDetail.value = false
}

defineExpose({
  uploadDialog
})
</script>

<style lang="less" scoped>
.upload-excel {
  .preview {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .imgbox {
      width: 140px;
      margin-bottom: 10px;

      img {
        width: 100%;
      }
    }
    span {
      padding-left: 15px;
      font-size: 16px;
      color: #303133;
    }
  }
  .watch {
    position: relative;
    .icon {
      padding-top: 10px;
      position: absolute;
      font-size: 18px;
      color: #e6a23c;
    }
    .text {
      padding: 10px 0 0 25px;
      cursor: pointer;
    }
    .text:hover {
      color: #409eff;
    }
  }
  .fileDetail {
    padding: 10px 10px 0 10px;
  }
}
</style>
